<template>
  <div class="login box">
    <div class="container row header mb-4">
      <h2>欢迎登录</h2>
    </div>
    <form
      action=""
      class="container"
      autocomplete="off"
      @submit.prevent="goLogin"
    >
      <!-- 账号 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-yonghu"></span>
        <input
          type="text"
          class="form-control"
          name="username"
          value=""
          v-model="userKey.username"
        />
      </div>
      <!-- 密码 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-mima"></span>
        <input
          type="password"
          class="form-control"
          name="password"
          value=""
          v-model="userKey.password"
        />
      </div>
      <div class="row mb-4">
        <button type="submit" class="btn btn-primary">登录</button>
      </div>
      <div class="row mb-3">
        <router-link class="link" to="/register"
          >还没有账号，去注册</router-link
        >
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
// import { loginAPI } from "@/api/user";
// import { setToken } from "@/utils/storage";
export default {
  data() {
    return {
      userKey: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    // async goLogin() {
    //   const userKey = { username: this.username, password: this.password };
    //   console.log(userKey);
    //   const res = await loginAPI(userKey);
    //   console.log(res);
    //   if (res.data.code === 0) {
    //     setToken(res.data.token);
    //     this.$message({
    //       message: res.data.message,
    //       type: "success",
    //     });
    //     setTimeout(() => {
    //       this.$router.push("/index");
    //     }, 3000);
    //   } else {
    //     this.$message({
    //       message: res.data.message,
    //       type: "error",
    //     });
    //   }
    // },
    ...mapActions("user", ["login"]),
    async goLogin() {
      // console.log(this.userKey);
      await this.login(this.userKey);
      this.$message.success("登录成功");
      setTimeout(() => {
        this.$router.push("/index");
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 360px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  .header {
    display: flex;
    align-items: center;
    h2 {
      font-size: 22px;
    }
  }
  .form-group {
    position: relative;
    .iconfont {
      position: absolute;
      left: 4px;
      top: 6px;
      font-weight: bold;
      color: #a9a9aa;
      width: 36px;
    }
    input.form-control {
      padding-left: 40px;
    }
  }
}
</style>
